<script setup>
import { ref, inject, computed } from 'vue'
import { usePlaylistStore } from '@/stores/playlist'
import { usePlayerStore } from '@/stores/player'
import { SHARE_TABS } from '@/common/constant'
import { setValue } from '@/common/utils'

// 获取歌单数据和方法
const playlistStore = usePlaylistStore()
// 获取播放器数据和方法
const playerStore = usePlayerStore()

// 获取App数据和方法
const { updateModal, handleScroll } = inject('common', null)
// 选项分类
const shareTabs = computed(() => SHARE_TABS.categorize)
const tabsCurrent = ref(SHARE_TABS.currentIndex)

// 切换分类
const changeTabs = (index) => {
  // 获取索引
  setValue({ target: tabsCurrent, value: index })
}

// 点击歌曲
const handleSong = (song) => {
  // 显示小播放器
  playerStore.setPlayerStatus({ smallPlayer: true })
  playerStore.setPlayerInfo(song)
}

// 删除歌曲
const handleDelSong = (song) => {
  // 设置模态框状态
  updateModal({
    status: {
      mode: 1,
      type: 1,
      showModal: true,
      confirmText: '移除',
      modalTitle: `从收藏中移除歌曲?`,
      content: `《${song.name}》${song.artist}`,
      id: song.id,
    },
  })
}

// 点击歌单项事件
const handlePlaylist = (playlist) => {
  playlistStore.setSongListByPlaylistId(playlist)
}

// 删除歌单
const handleDelPlaylist = (playlist) => {
  // 设置模态框状态
  updateModal({
    status: {
      mode: 1,
      type: 2,
      showModal: true,
      confirmText: '移除',
      modalTitle: `从收藏中移除歌单?`,
      content: `《${playlist.name}》`,
      id: playlist.id,
    },
  })
}
</script>

<template>
  <ty-page
    :player-store="playerStore"
    title="收藏"
  >
    <view class="share-content">
      <view class="share-tabs">
        <u-tabs
          :list="shareTabs"
          :is-scroll="false"
          bg-color="transparent"
          gutter="20"
          v-model="tabsCurrent"
          @change="changeTabs"
        ></u-tabs>
      </view>
      <view class="share-list">
        <swiper
          class="share-list--swiper"
          :current="tabsCurrent"
        >
          <swiper-item>
            <ty-song-list
              :list="playerStore.playerCollect.songlist"
              :player-info="playerStore.playerInfo"
              empty-mode="favor"
              empty-text="暂无收藏歌曲"
              load-status="nomore"
              item-bg-color="#f8f8f8"
              is-row
              is-del
              :row="3"
              @click="handleSong"
              @del="handleDelSong"
              @scroll="handleScroll"
            ></ty-song-list>
          </swiper-item>
          <swiper-item>
            <ty-song-list
              :list="playerStore.playerCollect.playlist"
              empty-mode="favor"
              empty-text="暂无收藏歌单"
              load-status="nomore"
              item-bg-color="#f8f8f8"
              is-row
              is-del
              :row="3"
              @click="handlePlaylist"
              @del="handleDelPlaylist"
              @scroll="handleScroll"
            ></ty-song-list>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </ty-page>
</template>

<style lang="scss" scoped></style>
